<template>
	<view>
		<view class="signIn-view-header">

		</view>
		<!-- 签到领好礼 -->
		<view class="padding-30">
			<view class="signIn-list">
				<line-title name="签到领好礼" color="#9E1806" backgroundColor="#9E1806" fontSize="18px"
					fontWeight="bold"></line-title>
				<view class="signIn-item">
					<swiper-grid :list="swiperGridList" :signcount="signcount"></swiper-grid>
				</view>
				<!-- 按钮 -->
				<bottom-button name="立即签到" backgroundColor="#9E1806" color="#ffffff" @click="signIn(1)"></bottom-button>
			</view>
		</view>
		<!-- 签到领奖品 -->
		<view style="padding: 30rpx 30rpx 150rpx 30rpx;">
			<view class="signIn-list1">
				<line-title name="签到领奖品" color="#9E1806" backgroundColor="#9E1806" fontSize="18px"
					fontWeight="bold"></line-title>
				<view class="signIn-gift-desc" style="margin-top: 10rpx;">连续签到十五天 可获得雄安房产证</view>
				<view class="signIn-gift-desc" style="margin-bottom: 20rpx;">连续签到三十天 可获得别墅</view>
				<!-- 奖品展示 -->
				<view class="signIn-gift-view">
					<!-- 房产证 house_card -->
					<view>
						<view class="signIn-gift-image" style="margin-right: 20rpx;">
							<image class="signIn-gift-image1" src="../../../static/mine/21.png" mode=""></image>
							<view class="singIn-gift-text" v-if="house_card == 1">已领取</view>
						</view>
					    <view class="signIn-gift-btn">
							<button-round v-if="house_card == 1" name="已领取" backgroundColor="#FFE2B7" color="#ffffff"
								borderRadius="15rpx"></button-round>
							<button-round v-else name="立即领取" backgroundColor="#9E1806" color="#ffffff"
								borderRadius="15rpx"
								@click="signIn(2)"></button-round>
						</view>
					</view>
					<!-- 别墅 house -->
					<view>
						<view class="signIn-gift-image">
							<image class="signIn-gift-image1" src="../../../static/mine/22.png" mode=""></image>
							<view class="singIn-gift-text" v-if="house == 1">已领取</view>
						</view>
						<view class="signIn-gift-btn">
							<button-round v-if="house == 1" name="已领取" backgroundColor="#FFE2B7" color="#ffffff"
								borderRadius="15rpx"></button-round>
							<button-round v-else name="立即领取" backgroundColor="#9E1806" color="#ffffff"
								borderRadius="15rpx"
								@click="signIn(3)"></button-round>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lineTitle from "@/components/title/line-title.vue"
	import swiperGrid from "@/components/gird/swiper-grid.vue"
	import bottomButton from "@/components/button/bottomButton.vue"
	import buttonRound from "@/components/button/button-round.vue"
	export default {
		components: {
			lineTitle,
			swiperGrid,
			bottomButton,
			buttonRound
		},
		data() {
			return {
				swiperGridList: [
					[{
							name: '第1天',
							text: '1万',
							statusNum: '0'
						},
						{
							name: '第2天',
							text: '2万',
							statusNum: '1'
						},
						{
							name: '第3天',
							text: '3万',
							statusNum: '2'
						},
						{
							name: '第4天',
							text: '4万',
							statusNum: '3'
						},
						{
							name: '第5天',
							text: '5万',
							statusNum: '4'
						},
						{
							name: '第6天',
							text: '6万',
							statusNum: '5'
						},
						{
							name: '第7天',
							text: '7万',
							statusNum: '6'
						},
						{
							name: '第8天',
							text: '8万',
							statusNum: '7'
						},
						{
							name: '第9天',
							text: '9万',
							statusNum: '8'
						},
						{
							name: '第10天',
							text: '10万',
							statusNum: '9'
						},
						{
							name: '第11天',
							text: '11万',
							statusNum: '10'
						},
						{
							name: '第12天',
							text: '12万',
							statusNum: '11'
						},
						{
							name: '第13天',
							text: '13万',
							statusNum: '12'
						},
						{
							name: '第14天',
							text: '14万',
							statusNum: '13'
						},
						{
							name: '第15天',
							text: '房产证',
							statusNum: '14'
						},
					],
					[{
							name: '第16天',
							text: '16万',
							statusNum: '15'
						},
						{
							name: '第17天',
							text: '17万',
							statusNum: '16'
						},
						{
							name: '第18天',
							text: '18万',
							statusNum: '17'
						},
						{
							name: '第19天',
							text: '19万',
							statusNum: '18'
						},
						{
							name: '第20天',
							text: '20万',
							statusNum: '19'
						},
						{
							name: '第21天',
							text: '21万',
							statusNum: '20'
						},
						{
							name: '第22天',
							text: '22万',
							statusNum: '21'
						},
						{
							name: '第23天',
							text: '23万',
							statusNum: '22'
						},
						{
							name: '第24天',
							text: '24万',
							statusNum: '23'
						},
						{
							name: '第25天',
							text: '25万',
							statusNum: '24'
						},
						{
							name: '第26天',
							text: '26万',
							statusNum: '25'
						},
						{
							name: '第27天',
							text: '27万',
							statusNum: '26'
						},
						{
							name: '第28天',
							text: '28万',
							statusNum: '27'
						},
						{
							name: '第29天',
							text: '29万',
							statusNum: '28'
						},
						{
							name: '第30天',
							text: '别墅',
							statusNum: '29'
						},
					],
				],
				signcount: 0,
				house_card:'',
				house:''
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			signIn(type) {
				this.$http.post(this.$api.signIn, {
					type: type
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.$tools.toast(res.msg)
						this.getUserInfo()
					}
				})
			},
			getUserInfo() {
				this.$http.post(this.$api.getUserInfo, {}, {
					token: true
				}).then(res => {
					this.signcount = res.data.signcount
					this.house_card = res.data.house_card
					this.house = res.data.house
				})
			},
		}
	}
</script>

<style lang="scss">
	.signIn-gift-btn{
		padding: 20rpx;
		margin-top: 20rpx;
	}
	
	.signIn-gift-image {
		width: 280rpx;
		height: 300rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.signIn-gift-image1 {
		width: 100%;
		height: 100%;
	}

	.singIn-gift-text {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 0px 0px 20rpx 0px;
		background: #C52B21;
		font-size: 10px;
		color: #FFF4D8;
		padding: 6rpx 10rpx;

	}

	.signIn-gift-view {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.signIn-view-header {
		width: 100%;
		height: 600rpx;
		background: url('@/static/mine/16.png') no-repeat;
		background-size: 100% 100%;
	}

	.signIn-list {
		background: #FFF0CA;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: -280rpx;
	}

	.signIn-list1 {
		background: #FFF0CA;
		border-radius: 30rpx;
		padding: 30rpx;
	}

	.signIn-item {
		margin-top: 30rpx;
	}

	.signIn-gift-desc {
		font-size: 14px;
		color: #333333;
		text-align: center;
		margin-bottom: 10rpx;
	}
</style>